<script setup>
import { ref,reactive,computed,watch,onMounted ,nextTick} from "vue";
import {file} from "@/util/file.js"
import {dirToData} from "@/util/index.js"
import dir from "@/components/dir/index.vue"
import editorHeader from "@/components/editorHeader.vue"
import teminals from "@/components/teminals.vue"
import fileNav from "@/components/fileNav.vue"
const nav=reactive([{
	title:"文件",
	menuWordCount:5,
	menu:[
		{
			title:"打开文件夹",
			handle:openFolder
		}
	]
},{
	title:"编辑",
	menuWordCount:0,
	menu:[
		{
			title:"test"
		}
	]
}])
const dirData=reactive({
	value:[]
})
async function openFolder(){
	const dirArray= await file.showDir();
	dirData.value=dirToData(dirArray||[],"name","folderContents")
}
async function getFile(f){
	const txt=await file.getFileContent(f)
	console.log("txt:",txt);
	return txt
}
async function createDir(dir){
	return file.saveDir(dir,'test')
}
async function createfile(dir){
	return file.saveFile(dir,'test.txt')
}
function allMouseenter(){
	hover.value=true
}
function allMouseout(){
	hover.value=false
}

const hover=ref(false)
class Move{
	constructor(){
		this.style=document.documentElement.style
		this.current=""
		this.move=this.move.bind(this)
		document.addEventListener("mouseup",this.mouseup.bind(this))
	}
	dirMove(x){
		document.body.className="bodyDirMove"
		if(window.innerWidth-x>300){
			if(x<200){
				this.style.setProperty('--dir-width', `0px`)
			}else{
				this.style.setProperty('--dir-width', `${x-48}px`)
			}
		}
	}
	terminalsMove(y){
		document.body.className="bodyTerminalsMove"
		if(y<100){
			if(y<50){
				this.style.setProperty('--terminals-height', `${window.innerHeight-38-27}px`)
			}
		}else if(window.innerHeight-y>100){
			this.style.setProperty('--terminals-height', `${window.innerHeight-y-27}px`)
		}else if(window.innerHeight-y<70){
			this.style.setProperty('--terminals-height', `0px`)
		}
	}
	allMove(x,y){
		document.body.className="bodyAllMove"
		this.dirMove(x)
		this.terminalsMove(y)
	}
	move(e){
		if(this.current){
			if(this.current==="dir"){
				this.dirMove(e.clientX)
			}else if(this.current==="terminals"){
				this.terminalsMove(e.clientY)
			}else if(this.current==="all"){
				this.allMove(e.clientX,e.clientY)
			}
		}
	}
	mousedown(current){
		document.addEventListener("mousemove",this.move)
		this.current=current
		console.log("this:",this);
	}
	mouseup(e){
		document.removeEventListener("mousemove",this.move)
		document.body.className=""
		move.current=''
		hover.value=false
	}
}
const move=reactive(new Move())
</script>


<template>
	<editorHeader :nav="nav"></editorHeader>
	<div class="operating">
		<div class="left_header"></div>
		<dir :data="dirData.value" :file="file" :move="move" :hover="hover" :openFolder="openFolder"></dir>
		<div class="content">
			<div class="editing">
				<fileNav></fileNav>
				<div class="edit">
					<router-view></router-view>
				</div>
			</div>
			<teminals :move="move" :hover="hover" @allMouseenter="allMouseenter" @allMouseout="allMouseout"></teminals>
		</div>
	</div>
	<div class="status_bar"></div>
</template>

<style>
.bodyDirMove *{
	cursor: w-resize !important;
}
.bodyTerminalsMove *{
	cursor: s-resize !important;
}
.bodyAllMove *{
	cursor: move !important;
}

</style>
<style scoped>
.operating{
	min-width: var(--operating-min-width);
	height: calc( 100vh - var(--header-height) - var(--status_bar-height) );
	display: flex;
	flex-direction: row;
}
.left_header{
	background-color: #333;
	width: var(--left-header-width);
	height: 100%;
}
.content{
	display: flex;
	flex-direction: column;
	width: calc( 100vw - var(--left-header-width) - var(--dir-width));
	height: 100%;
	background-color: #1e1e1e;
}
.editing{
	width: 100%;
	height: calc( 100vh - var(--terminals-height) - var(--header-height) - var(--terminals-move-height) + 1px - var(--fileNavHeight));
}
.edit{
	/* flex-grow: 1; */
	/* width: calc( 100vw - var(--left-header-width) - var(--dir-width)); */
	width: 100%;
	height: calc( 100% - var(--fileNavHeight));
	overflow: auto;
}
.edit::-webkit-scrollbar
{/*整个滚动条  https://m.php.cn/article/480425.html*/
    width: .8em;
    height: .8em;
    background-color: transparent;
}
.edit:hover::-webkit-scrollbar-thumb
{/*滚动条*/
	display: block;
}
.edit::-webkit-scrollbar-thumb
{/*滚动条*/
	transition: all 5s;
	display: none;
    background-color:rgb(72, 72, 72);
}
.edit::-webkit-scrollbar-button{/*上下按钮*/
	display: none;
}
.edit::-webkit-scrollbar-corner {
	background-color: transparent;
}
.status_bar{
	height: var(--status_bar-height);
	background-color: #007acc;
}

</style>